<template>
  <div class="ArticleInfo">
    <van-nav-bar
        title="面经详细"
        left-text="返回"
        @click-left="onClickLeft"
    />
    <h1>{{ item.stem }}</h1>
    <div class="title">
        <span> {{ item.createdAt }} | {{ item.views }} 浏览量 | {{ item.likeCount }} 点赞数 </span>
    </div>
    <div class="author">
        <img :src="item.avatar" alt="">
        <span> {{item.creator}} </span>
    </div>
    <div class="content" ref="content">
    </div>
    <div class="bottom">
        <div class="like" :class="{checkLike: item.likeFlag}" @click="like">
            <van-icon name="like-o" size=25 />
        </div>
        <div class="like" :class="{checkLike:item.collectFlag}" @click="collect">
            <van-icon name="star-o" size=25 />
        </div>
    </div>
  </div>
</template>

<script>
import myAxios from '@/interceptors';
export default {
    name: 'ArticleInfo',
    data() {
        return {
            item: {},
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async getData(){
            const res =  await myAxios.get(`/h5/interview/show?id=${this.$route.params.id}`)
            this.item = res.data
            this.$nextTick(()=>{
                this.$refs.content.innerHTML = this.item.content
            })
        },
        async like(){
            // http://interview-api-t.itheima.net/h5/interview/opt
            
            // http://interview-api-t.itheima.net/h5/interview/opt
            await myAxios.post('h5/interview/opt',{id:this.item.id,optType:1})
            this.getData()
        },
        async collect(){
            await myAxios.post('h5/interview/opt',{id:this.item.id,optType:2})
            this.getData()
        }
    },
    created() {
        console.log(this.$route.params.id)
        this.getData()
    },
    mounted() {
        
    },
}
</script>

<style long="less" scoped >
    .ArticleInfo{
        margin: 10px;
        .title{
            color: #999;
            font-size: 10px;
            text-align: left;
        }
        .author{
            text-align: left;
            display: flex;
            align-items: center;
            img{
                width:32px;
                height:32px;
                border-radius: 50%;
                margin-right: 10px;
            }
            span{
                font-size: 10px;
            }
        }
        .content{
            text-align: left;
        }
        .bottom{
            display: flex;
            position: absolute;
            bottom: 100px;
            right: 0;
            .like{
                width: 35px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: #999;
                border-radius: 50%;
                /* background-color: #ccc; */
                border: 1px solid #ccc;
                margin-right: 20px;
            }
            .checkLike{
                background-color: #fec635;
                color: white;
            }
        }
    }
    .van-nav-bar__text{
        color: #fa6d1d;
    }
    h1{
        text-align: left;
    }
</style>